<template>
	<view class="u-p-l-80 u-p-r-80">
		<!-- 标题 -->
		<view class="font-bold u-f-78">{{ lang_first.third_title }}</view>
		
		<!-- 表单 -->
		<view class="u-m-t-96 u-p-b-14">
			<view
			class="flex-center"
			@click="visible = true"
			>
				<view
				v-for="(item, index) in dates"
				:key="index"
				class="u-f-44 flex-center nowrap"
				style="letter-spacing: 32rpx">
					{{ item }}<text class="u-f-32" style="position: relative; top: 10rpx; color: #585858">{{ index < dates.length - 1 ? '/' : '' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view
		class="flex-center-center"
		style="margin-top: 136rpx">
			<x-common-btn
			width="590"
			height="102"
			@click="nextAction"
			>{{ lang_common.continue }}</x-common-btn>
		</view>
		
		<!-- 时间选择器 -->
		<u-picker v-model="visible" mode="time" :params="params" :showTimeTag="false" @confirm="changeDate"></u-picker>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	let defaultDete = '1900-01-01'
	export default {
		props: {
			parentObj: {
				default: () => ({})
			}
		},
		data() {
			let minDate = new Date('1900/01/01').getTime()
			return {
				// 默认是1900-01-01
				value: defaultDete,
				date: defaultDete,
				minDate,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				visible: false
			}
		},
		computed: {
			dates() {
				return this.value.split('-')
			}
		},
		watch: {
			parentObj: {
				handler(v) {
					this.value = v && v.birthday || defaultDete
					this.date = v && v.birthday || defaultDete
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 修改日期
			changeDate({ year, month, day }) {
				this.value = dayjs(`${ year }-${ month }-${ day }`).format('YYYY-MM-DD')
				this.visible = false
			},
			// 下一步
			nextAction() {
				this.$emit('change', { birthday: this.value })
			}
		}
	}
</script>

<style scoped lang="scss">
	.sex-btn {
		
	}
</style>
